<template>
    <app-dialog v-model="show" width="800px" title="引用代理" @open="handleOpen">

        <div class="quoteip_dialog">
            <div class="quoteip_header">
                <img src="@/assets/home/waring.png" style="margin-right: 8px;width: 16px;height: 16px;" alt="">
                <div>多个环境共用同个代理时，可能会导致网络变慢</div>
            </div>
            <div class="quoteip_body">
                <div class="search">
                    <div class="left">

                        <div class="left_item">
                            <el-dropdown placement="bottom" trigger="click">
                                <app-button2 class="button">
                                    <div>{{ getLabel(formData.proxyType, proxyTypes) }}</div>
                                    <div class="select_img"></div>
                                </app-button2>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item v-for="item in proxyTypes" :key="item.value"
                                            :class="formData.proxyType == item.value ? 'dropdown-item_active' : ''"
                                            @click="changeProxyType(item.value)">
                                            {{ item.label }}
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>

                        <div class="left_item" style="margin-left: 8px;">
                            <el-dropdown placement="bottom" trigger="click">
                                <app-button2 class="button">
                                    <div class="flex">
                                        <img v-if="formData.environmentType != 0"
                                            :src="geticon(formData.environmentType, environmentTypes)"
                                            style="width: 16px;height: 16px;margin-right: 8px;" alt="">
                                        <div>{{ getLabel(formData.environmentType, environmentTypes) }}</div>
                                    </div>
                                    <div class="select_img"></div>
                                </app-button2>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item v-for="item in environmentTypes" :key="item.value"
                                            @click="changeenvironmentType(item.value)">
                                            <div class="flex">
                                                <img v-if="item.value != 0" :src="item.icon"
                                                    style="width: 16px;height: 16px;margin-right: 8px;" alt="">
                                                <div>{{ item.label }}</div>
                                            </div>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                    <div class="right">
                        <el-input v-model="formData.filterValue" @change="getIpList" style="max-width: 270px"
                            placeholder="请输入" :prefix-icon="Search" class="input-select">
                            <template #prepend>
                                <el-select v-model="formData.filterSelect" @change="formData.filterValue = ''"
                                    style="width: 100px">
                                    <el-option v-for="item in filterSelects" :key="item.field" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </template>
                        </el-input>
                    </div>
                </div>

                <div class="list" v-loading="loading">
                    <template v-if="ipList.length > 0">
                        <el-table :data="ipList" style="width: 100%" max-height="calc( 100vh - 340px )"
                            class="ip_list_table">
                            <el-table-column prop="proxyType" width="50">
                                <template #default="scope">
                                    <el-radio-group v-model="radioIp">
                                        <el-radio :value="scope.row.id"></el-radio>
                                    </el-radio-group>
                                </template>
                            </el-table-column>
                            <el-table-column prop="date" label="环境名称">
                                <template #default="scope">
                                    <div class="flex">
                                        <img v-if="scope.row.operating_system == 'Windows'" :src="windowsImg"
                                            style="width: 16px;height: 16px;margin-right: 8px;" alt="">
                                        <img v-if="scope.row.operating_system == 'Android'" :src="androidImg"
                                            style="width: 16px;height: 16px;margin-right: 8px;" alt="">
                                        <img v-if="scope.row.operating_system == 'iOS'" :src="iosImg"
                                            style="width: 16px;height: 16px;margin-right: 8px;" alt="">
                                        <img v-if="scope.row.operating_system == 'macOS'" :src="macImg"
                                            style="width: 16px;height: 16px;margin-right: 8px;" alt="">
                                        <div>{{ scope.row.name }}</div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="proxyType" label="代理类型">
                                <template #default="scope">
                                    <div>{{ scope.row.environment_data.proxy.proxyType }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="address" label="代理信息/提取链接" width="300">
                                <template #default="scope">
                                    <div class="column">
                                        <div class="column_item" style="color: #000000a6;">
                                            <div class="label">代理主机/端口:</div>
                                            <div class="value">{{ scope.row.environment_data.proxy.host }}/{{
                                                scope.row.environment_data.proxy.port }}</div>
                                        </div>
                                        <div class="column_item" style="color: #afb0b2;">
                                            <div class="label">代理账号:</div>
                                            <div class="value">{{ scope.row.environment_data.user.plantUser.length != 0
                                                ? getusers(scope.row) : '--' }}</div>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="address" label="国家/地区等">
                                <template #default="scope">
                                    <div>{{ scope.row.environment_data.proxy.country == '' ? '--' :
                                        `${getLabel(scope.row.environment_data.proxy.country,
                                            countryOptions)}/${scope.row.environment_data.proxy.province}/${scope.row.environment_data.proxy.city}`
                                    }}</div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                    <app-none :size="120" v-else />
                </div>
                <div class="footer">
                    <el-pagination v-model:current-page="page.page" v-model:page-size="page.page_size"
                        :disabled="disabled" background layout="total,  prev, pager, next,sizes" :total="page.total"
                        @size-change="getIpList" @current-change="getIpList" />
                </div>
            </div>
        </div>

        <template #footer>
            <app-button @click="handleClose">取消</app-button>
            <app-button class="app-button-ptn" style="margin-left: 8px;opacity: .3;"
                v-if="radioIp == ''">引用</app-button>
            <app-button class="app-button-ptn" style="margin-left: 8px;" @click="clickSubmit()"
                v-if="radioIp != ''">引用</app-button>
        </template>
    </app-dialog>
</template>

<script setup>
import { http } from '@/utils/http'
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import windowsImg from "@/assets/home/windows.png";
import windows_hoverImg from "@/assets/home/windows_hover.png";
import androidImg from "@/assets/home/android.png";
import android_hoverImg from "@/assets/home/android_hover.png";
import iosImg from "@/assets/home/ios.png";
import ios_hoverImg from "@/assets/home/ios_hover.png";
import macImg from "@/assets/home/mac.png";
import mac_hoverImg from "@/assets/home/mac_hover.png";

const props = defineProps({
    data: Object
})
const show = defineModel({ type: Boolean })
const emits = defineEmits()

const ipList = ref([])
const loading = ref(false)
const countryOptions = ref([])
const radioIp = ref('')
const formData = ref({
    proxyType: 0,
    environmentType: 0,
    filterSelect: 'environment_name',
    filterValue: ''
})

const proxyTypes = ([
    {
        value: 0,
        label: '代理类型'
    }, {
        value: 'http',
        label: 'HTTP'
    }, {
        value: 'https',
        label: 'HTTPS'
    }, {
        value: 'SSH',
        label: 'SSH'
    }, {
        value: 'Socks5',
        label: 'Socks5'
    }, {
        value: 'Oxylabsauto',
        label: 'Oxylabsauto （动态代理）'
    }, {
        value: 'Lumauto',
        label: 'Lumauto （动态代理）'
    }, {
        value: 'Luminati',
        label: 'Luminati （静态代理）'
    }, {
        value: 'smartproxy',
        label: 'smartproxy （动态代理）'
    }, {
        value: 'Iphtml',
        label: 'Iphtml（动态代理）'
    }, {
        value: 'IPIDEA',
        label: 'IPIDEA（动态代理）'
    },
])

const environmentTypes = ([
    {
        value: 0,
        label: '环境类型'
    }, {
        value: 'Windows',
        label: 'Windows',
        icon: windowsImg,
        icon_active: windows_hoverImg
    }, {
        value: 'Android',
        label: 'Android',
        icon: androidImg,
        icon_active: android_hoverImg
    }, {
        value: 'iOS',
        label: 'iOS',
        icon: iosImg,
        icon_active: ios_hoverImg
    }, {
        value: 'macOS',
        label: 'macOS',
        icon: macImg,
        icon_active: mac_hoverImg
    },
])

const filterSelects = ref([
    {
        value: 'environment_name',
        label: '环境'
    }, {
        value: 'host',
        label: '代理主机'
    }, {
        value: 'username',
        label: '代理账号'
    }, {
        value: 'extract_url',
        label: '提取链接'
    },
])
const page = ref({
    page: 1,
    page_size: 20,
    total: 0
})

const handleOpen = () => {
    getIpList()
    getCountries()

    formData.value = {
        proxyType: 0,
        environmentType: 0,
        filterSelect: 'environment_name',
        filterValue: ''
    }
    page.value = {
        page: 1,
        page_size: 20,
        total: 0
    }
    ipList.value = []
    radioIp.value = ''
}

const getLabel = (value, options) => {
    let label = ''
    options.forEach(item => {
        if (item.value == value) {
            label = item.label
        }
    });
    return label
}

const getusers = (row) => {
    let arr = []
    row.environment_data.user.plantUser.forEach(item => {
        arr.push(item.name)
    });

    return arr.join(',')

}

const geticon = (value, options) => {
    let icon = ''
    options.forEach(item => {
        if (item.value == value) {
            icon = item.icon
        }
    });
    return icon
}

const getIpList = () => {
    loading.value = true
    ipList.value = []
    let params = {
        page: page.value.page,
        page_size: page.value.page_size
    }

    if (formData.value.proxyType != 0) {
        params.type = formData.value.proxyType
    }
    if (formData.value.environmentType != 0) {
        params.operating_system = formData.value.environmentType
    }
    if (formData.value.filterValue != '') {
        params[formData.value.filterSelect] = formData.value.filterValue
    }


    http.get('/environment/get_quote_proxy', { params }).then((res) => {
        loading.value = false
        ipList.value = res.data.list

        page.value.total = res.data.total
        page.value.page = res.data.page
        page.value.page_size = res.data.page_size

    })
}

const changeProxyType = (value) => {
    formData.value.proxyType = value
    getIpList()
}
const changeenvironmentType = (value) => {
    formData.value.environmentType = value
    getIpList()
}

// 获取国家
const getCountries = () => {
    http.get('/environment/get_countries').then(res => {
        countryOptions.value = res.data.list.map(item => {
            return {
                value: item.country_code,
                label: item.country_name
            }
        })
    })
}

const handleClose = () => {
    show.value = false
}

const clickSubmit = () => {
    let proxy = {}
    ipList.value.forEach(item => {
        if (item.id == radioIp.value) {
            proxy = item.environment_data.proxy
        }
    });
    emits('change', proxy)
    handleClose()
}
</script>

<style lang="scss" scoped>
.quoteip_dialog {
    padding: 24px;
    min-height: 150px;
    display: flex;
    flex-direction: column;

    .quoteip_header {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        background-color: #fffbe6;
        border: 1px solid #ffe58f;
        padding: 0 16px;
        color: #000000d9;
        font-size: 14px;
        margin-bottom: 16px;
    }

    .quoteip_body {
        flex: 1;
        display: flex;
        flex-direction: column;

        .search {
            display: flex;
            justify-content: space-between;
            margin-bottom: 16px;

            .left {
                display: flex;

                .left_item {

                    .button {
                        .select_img {
                            margin-left: 8px;
                            width: 14px;
                            height: 14px;
                            background: url('@/assets/home/down.png');
                            background-size: cover;
                        }
                    }
                }
            }


        }

        .footer {
            margin-top: 16px;
            display: flex;
            justify-content: flex-end;
        }
    }

}

.flex {
    display: flex;
    align-items: center;
}

.column {
    display: flex;
    flex-direction: column;

}

.column_item {
    display: flex;

    .label {
        margin-right: 6px;

    }

    // .value{

    // }
}
</style>

<style>
.dropdown-item_active {
    font-weight: bold;
    background-color: #F2F6FC !important;
}

/* .ip_list_table .el-table__inner-wrapper::before{
    height: 0;
} */
</style>